<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图加柱状图</title>
    <link rel="shortcut icon" href="../lib/image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../lib/css/all.css">
    <script src="../lib/js/echarts.min.js"></script>
    <script src="../lib/js/jquery-3.3.1.min.js"></script>

</head>
<style>
    #main {
        transform: rotateZ(15deg) rotateX(50deg);
    }
</style>

<body>
    <div id="app">
        <div id="main" style="width: 900px;height:550px;"></div>
    </div>
    <script type="text/javascript">
		var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/371300_full.json";
		var geoCoordMap = {
			兰山区: [118.33, 35.25],
			河东区: [118.5, 35.08],
			罗庄区: [118.28, 34.95],
			费县: [117.97, 35.27],
			临沭县: [118.65, 34.92],
			沂南县: [118.47, 35.55],
			莒南县: [118.83, 35.18],
			平邑县: [117.70, 35.45],
			兰陵县: [118.05, 34.85],
			蒙阴县: [117.93, 35.72],
			郯城县: [118.35, 34.62],
			沂水县: [118.62, 35.78]
		}
		var customerBatteryCityData = [{
				name: "兰山区",
				value: 40
			},
			{
				name: "河东区",
				value: 40
			},
			{
				name: "罗庄区",
				value: 40
			},
			{
				name: "费县",
				value: 40
			},
			{
				name: "临沭县",
				value: 40
			},
			{
				name: "沂南县",
				value: 40
			},
			{
				name: "莒南县",
				value: 40
			},
			{
				name: "平邑县",
				value: 40
			},
			{
				name: "兰陵县",
				value: 40
			},
			{
				name: "蒙阴县",
				value: 40
			},
			{
				name: "郯城县",
				value: 40
			},
			{
				name: "沂水县",
				value: 40
			}
		]
		$.getJSON(uploadedDataURL, function(geoJson) {

			var myChart = echarts.init(document.getElementById('main'));

			echarts.registerMap('linyi', geoJson);
			option = {
				tooltip: {
					trigger: 'item',
					show: true,
					enterable: true,
					textStyle: {
						fontSize: 10,
						color: '#fff'
					},
					backgroundColor: 'rgba(0,2,89,0.8)',
					formatter: '{b}<br />{c}'
				},
				geo: [{
						map: 'linyi',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.2, // 默认显示级别
						layoutSize: '78%',
						layoutCenter: ['55%', '50%'],
						itemStyle: {
							normal: {
								areaColor: {
									type: 'linear-gradient',
									x: 0,
									y: 400,
									x2: 0,
									y2: 0,
									colorStops: [{
										offset: 0,
										color: 'rgb(19,68,154)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgb(15,169,195)' // 50% 处的颜色
									}],
									global: true // 缺省为 false
								},
								borderColor: 'rgb(0,154,252)',
								borderWidth: 1
							},
							emphasis: {
								areaColor: {
									type: 'linear-gradient',
									x: 0,
									y: 300,
									x2: 0,
									y2: 0,
									colorStops: [{
										offset: 0,
										color: 'rgba(37,108,190,1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(15,169,195,1)' // 50% 处的颜色
									}],
									global: true // 缺省为 false
								}
							}
						},
						emphasis: {
							itemStyle: {
								areaColor: 'blue'
							},
							label: {
								show: 0,
								color: '#fff'
							}
						},
						zlevel: 3
					},
					{
						map: 'linyi',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.2, // 默认显示级别
						layoutSize: '80%',
						layoutCenter: ['55%', '52.5%'],
						itemStyle: {
							normal: {
								borderColor: 'rgb(0,92,234)',
								borderWidth: 1,
								shadowColor: '#2C99F6',
								shadowOffsetY: 0,
								shadowBlur: 120,
								areaColor: 'rgb(29,85,139,0.2)'
							}
						},
						zlevel: 2,
						silent: true
					},
					{
						map: 'linyi',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.2, // 默认显示级别
						layoutSize: '77%',
						layoutCenter: ['55%', '51.5%'],
						itemStyle: {
							// areaColor: '#005DDC',
							areaColor: 'rgba(0,27,95,0.4)',
							borderColor: '#004db5',
							borderWidth: 1
						},
						zlevel: 1,
						silent: true
					},
					{
						map: 'linyi',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.2, // 默认显示级别
						layoutSize: '76%',
						layoutCenter: ['55%', '51.5%'],
						itemStyle: {
							// areaColor: '#005DDC',
							areaColor: 'rgba(0,27,95,0.4)',
							borderColor: '#004db5',
							borderWidth: 1
						},
						zlevel: 1,
						silent: true
					},
					{
						map: 'linyi',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.2, // 默认显示级别
						layoutSize: '78%',
						layoutCenter: ['55%', '51.5%'],
						itemStyle: {
							// areaColor: '#005DDC',
							areaColor: 'rgba(0,27,95,0.4)',
							borderColor: '#004db5',
							borderWidth: 1
						},
						zlevel: 1,
						silent: true
					},
					{
						map: 'linyi',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.2, // 默认显示级别
						layoutSize: '79%',
						layoutCenter: ['55%', '51.5%'],
						itemStyle: {
							// areaColor: '#005DDC',
							areaColor: 'rgba(0,27,95,0.4)',
							borderColor: '#004db5',
							borderWidth: 1
						},
						zlevel: 1,
						silent: true
					},
					{
						map: 'linyi',
						aspectScale: 0.9,
						roam: false, // 是否允许缩放
						zoom: 1.2, // 默认显示级别
						layoutSize: '80%',
						layoutCenter: ['55%', '51.5%'],
						itemStyle: {
							// areaColor: '#005DDC',
							areaColor: 'rgba(0,27,95,0.4)',
							borderColor: '#004db5',
							borderWidth: 1
						},
						zlevel: 1,
						silent: true
					}
				],
				series: [
					// map
					{
						geoIndex: 0,
						// coordinateSystem: 'geo',
						showLegendSymbol: true,
						type: 'map',

						roam: true,
						label: {
							normal: {
								show: false,
								textStyle: {
									color: '#fff'
								}
							},
							emphasis: {
								show: false,
								textStyle: {
									color: '#fff'
								}
							}
						},

						itemStyle: {
							normal: {
								borderColor: '#2ab8ff',
								borderWidth: 1.5,
								areaColor: '#12235c'
							},
							emphasis: {
								areaColor: '#2AB8FF',
								borderWidth: 0,
							}
						},
						map: 'linyi', // 使用
						data: customerBatteryCityData
						// data: this.difficultData //热力图数据   不同区域 不同的底色
					},
					// 柱状体的主干
					{
						type: 'lines',
						zlevel: 5,
						effect: {
							show: false,
							// period: 4, //箭头指向速度，值越小速度越快
							// trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
							// symbol: 'arrow', //箭头图标
							// symbol: imgDatUrl,
							symbolSize: 5 // 图标大小
						},
						lineStyle: {
							width: 20, // 尾迹线条宽度
							color: 'rgb(194,205,58, .6)',
							opacity: 1, // 尾迹线条透明度
							curveness: 0 // 尾迹线条曲直度
						},
						label: {
							show: 0,
							position: 'end',
							formatter: '245'
						},
						silent: true,
						data: lineData()
					},
					// 柱状体的顶部
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						geoIndex: 0,
						zlevel: 5,
						label: {
							show: true,
							formatter: function() {
								return ''
							},
							position: "top"
						},
						symbol: 'circle',
						symbolSize: [20, 10],
						itemStyle: {
							color: 'rgb(194,205,58, 1)',
							opacity: 1
						},
						silent: true,
						data: scatterData()
					},
					// 柱状体的底部
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						geoIndex: 0,
						zlevel: 4,
						label: {
							// 这儿是处理的
							formatter: '{b}',
							position: 'bottom',
							color: '#fff',
							backgroundColor: 'rgba(0,210,255, 0.5)',
							fontSize: 12,
							distance: 10,
							show: true
						},
						symbol: 'circle',
						symbolSize: [20, 10],
						itemStyle: {
							color: 'rgb(194,205,58, 1)',
							opacity: 1
						},
						silent: true,
						data: scatterData2()
					},
					// 底部外框
					{
						type: 'scatter',
						coordinateSystem: 'geo',
						geoIndex: 0,
						zlevel: 4,
						label: {
							show: false
						},
						symbol: 'circle',
						// symbolSize: [20, 20],
						itemStyle: {
							color: {
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 0.5,
								colorStops: [{
										offset: 0,
										color: 'rgb(194,205,58, 0)' // 0% 处的颜色
									},
									{
										offset: .75,
										color: 'rgb(194,205,58, 0)' // 100% 处的颜色
									},
									{
										offset: .751,
										color: 'rgb(194,205,58, 1)' // 100% 处的颜色
									},
									{
										offset: 1,
										color: 'rgb(194,205,58, 1)' // 100% 处的颜色
									}
								],
								global: false // 缺省为 false
							},

							opacity: 1
						},
						silent: true,
						data: scatterData2()
					}
				]
			}
			myChart.setOption(option);
		})


		// 动态计算柱形图的高度（定一个max）
		function lineMaxHeight() {
			const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
			return 0.2 / maxValue
		}
		// 柱状体的主干
		function lineData() {
			return customerBatteryCityData.map((item) => {
				return {
					coords: [geoCoordMap[item.name],
						[geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]
					]
				}
			})
		}
		// 柱状体的顶部
		function scatterData() {
			return customerBatteryCityData.map((item) => {
				return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]
			})
		}
		// 柱状体的底部
		function scatterData2() {
			return customerBatteryCityData.map((item) => {
				return {
					name: item.name,
					value: geoCoordMap[item.name]
				}
			})
		}
	</script>
</body>

</html>